<template>
  <div class="app-main-container">
    <div class="app-main-title">{{ translate("dictSet") }}</div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" :label="translate('dictId')" prop="id" />
      <el-table-column
        align="center"
        :label="translate('dictCode')"
        prop="code"
      />
      <el-table-column
        align="center"
        :label="translate('dictVal')"
        prop="val"
      />
      <el-table-column
        align="center"
        :label="translate('dictValDesc')"
        prop="description"
      />
      <el-table-column :label="translate('handle')" align="center">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="meta.indexOf('DictionaryUpdate') > -1"
              v-preventReClick
              type="primary"
              @click="editShow(scope.row)"
            >{{ translate("config") }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex-cc doumee-pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="pagination.page"
        hide-on-single-page
        @current-change="getList"
      />
    </div>
    <el-dialog
      :close-on-click-modal="modalDialog"
      :lose-on-press-escape="modalDialog"
      :title="translate('config')"
      :visible.sync="showDialog"
      width="500px"
    >
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="param"
        label-suffix="："
        label-width="auto"
      >
        <el-form-item :label="translate('dictId')" prop="orderTypeName">
          <el-input v-model="param.id" disabled />
        </el-form-item>
        <el-form-item :label="translate('dictCode')" prop="orderTypeName">
          <el-input v-model="param.code" disabled />
        </el-form-item>
        <el-form-item :label="translate('dictVal')" prop="orderTypeName">
          <el-input v-model="param.val" />
        </el-form-item>
        <el-form-item :label="translate('dictValDesc')" prop="orderTypeName">
          <el-input v-model="param.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">{{
          translate("cancel")
        }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="formOnSubmit('ruleForm')"
        >{{ translate("enter") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dictionaryList, dictionaryUpdate } from '@/api'
export default {
  name: 'DictValue',
  data() {
    return {
      modalDialog: this.$store.state.app.dialog,
      meta: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      listLoading: true,
      list: [],
      param: {},
      showDialog: false,
      rules: {
        val: [
          { required: true, message: this.translate('dictValPlace'), trigger: 'blur' }
        ],
        description: [
          { required: true, message: this.translate('dictValDescPlace'), trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList()
  },
  methods: {
    editShow(e) {
      this.showDialog = true
      this.param = { ...e }
    },
    formOnSubmit(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.confirmBtn()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    confirmBtn() {
      const param = this.param
      dictionaryUpdate({ param }).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success(this.translate('configScs'))
          this.showDialog = false
          this.getList()
        }
      })
    },
    getList(page) {
      const { pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      dictionaryList({ pagination, param: {}}).then(res => {
        this.listLoading = false
        this.list = res.recordList
        this.total = res.totalCount
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.device-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &::after {
    content: "";
    width: calc((100% - 90px) / 4);
  }

  .holder {
    width: calc((100% - 90px) / 4);
  }

  .device-item {
    padding: 20px;
    background-color: #f7f7f7;
    margin-bottom: 20px;
    display: flex;
    box-sizing: border-box;
    width: calc((100% - 90px) / 4);

    .device-uploader {
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      cursor: pointer;
      border: 1px dashed #ccc;
      border-radius: 8px;
      transition: all 0.3s;
      margin-right: 20px;
      &:hover {
        border-color: $menuActive;
        .uploader-icon {
          color: $menuActive;
        }
      }
      ::v-deep .el-upload {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .file {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          .delete {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
            align-items: center;
            justify-content: center;
            .icon {
              color: #fff;
            }
          }
          &:hover {
            .delete {
              display: flex;
            }
          }
        }
      }
      .uploader-icon {
        color: #aaaaaa;
        font-size: 22px;
        transition: all 0.3s;
      }
    }

    .name {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      .value {
        align-self: flex-start;
        font-weight: bold;
        font-size: 15px;
      }
    }
    .image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
}
.tip {
  font-size: 12px;
  line-height: 20px;
  height: 20px;
  color: #aaaaaa;
}
</style>
